<template>
  <div class="settings-wrapper">
    <!-- 设置页面标题 -->

    <header class="settings-header">
      <h2>修改密码</h2>
    </header>
    <!-- 返回按钮 -->
    <div class="back-button" @click="goBack">
      <i class="fa fa-arrow-left"></i>
      <!-- 使用 Font Awesome 图标 -->
    </div>
  <div class="change-password-container">
    <form @submit.prevent="changePassword">
      <div class="form-group">
        <label for="username">用户名:</label>
        <input type="text" id="username" v-model="userName" required />
      </div>
      <div class="form-group">
        <label for="current-password">原密码:</label>
        <input type="password" id="current-password" v-model="currentPassword" required />
      </div>
      <div class="form-group">
        <label for="new-password">新密码:</label>
        <input
          type="password"
          id="new-password"
          v-model="newPassword"
          required
          @input="clearConfirmPassword"
        />
      </div>
      <div class="form-group">
        <label for="confirm-password">确认新密码:</label>
        <input
          type="password"
          id="confirm-password"
          v-model="confirmPassword"
          required
          @input="checkPasswordMatch"
        />
        <span v-if="confirmPassword && passwordsMatch" class="password-match">两次新密码输入一致!</span>
        <span v-if="confirmPassword && !passwordsMatch" class="password-mismatch">两次新密码输入不一致!</span>
      </div>
      <button type="submit" :class="{ 'disabled-btn': !newPassword || !passwordsMatch }">提交</button>
    </form>
  </div>
  </div>
</template>

<script lang="ts">
import axios from "axios"; // 导入 axios
import { showToast } from "vant";
export default {
  name: "ChangePassword",
  data() {
    return {
      userName: "",
      currentPassword: "",
      newPassword: "",
      confirmPassword: "",
      passwordsMatch: true
    };
  },
  methods: {
  // 返回上一页
    goBack() {
      this.$router.go(-1); 
    },
    async changePassword() {
      if (!this.passwordsMatch) {
        showToast({
            message: "新密码和确认密码不一致",
            icon: "close"
        });
        return;
      }

      try {
        const response = await axios.post(
          "http://localhost:8888/elm/users/changePassword",
          {
            username: this.userName,
            currentPassword: this.currentPassword,
            newPassword: this.newPassword
          }
        );
       if (response.data.flag) {
        // 成功
        showToast({
        message: "修改成功，请登录",
        icon: "passed"
    });
        this.$router.push({ path: '/login' }); 
    } else {
        // 失败
        showToast({
            message: response.data.message || "密码修改失败",
            icon: "close"
        });
    }
} catch (error) {
    console.error("修改密码时出错", error);
    showToast({
        message: "修改密码失败，请重试",
        icon: "close"
    });
}
    },
    clearConfirmPassword() {
      this.confirmPassword = ""; // 清空确认密码框
      this.checkPasswordMatch(); // 再次检查密码匹配
    },
    checkPasswordMatch() {
      this.passwordsMatch = this.newPassword === this.confirmPassword;
    }
  }
};
</script>

  <style scoped>
  /* 设置页面整体布局 */
.settings-wrapper {
  width: 100%;
  height: 100%;
}

/* 设置页面标题 */
.settings-header {
  width: 100%;
  height: 12vw;
  background-color: #0097ff;
  color: #fff;
  font-size: 3.8vw;

  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;

  display: flex;
  justify-content: center;
  align-items: center;
}
/* 设定容器样式 */
.change-password-container {
  margin-top: 10vw;
  padding: 20px;
  border-radius: 10px;
  text-align: center;
  background-color: #fff; 
  transition: transform 0.3s ease; 
}

form {
  display: flex;
  flex-direction: column;
}

.form-group {
  margin-bottom: 15px;
  text-align: left;
}

label {
  font-weight: bold;
  display: block;
  margin-bottom: 5px;
  color: #333; /* 标签颜色 */
}

input {
  width: 100%;
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-sizing: border-box;
  margin-top: 5px;
  background-color: #fafafa;
  transition: all 0.3s ease-in-out; 
}

/* 输入框的焦点效果 */
input:focus {
  border: 2px solid #3498db; 
  box-shadow: 0 0 10px rgba(52, 152, 219, 0.3); 
  transform: scale(1.05); 
  outline: none; 
}

/* 输入框的悬停效果 */
input:hover {
  transform: scale(1.05); 
  border: 1px solid #2980b9; 
}

/* 按钮样式 */
button {
  background-color: #3498db;
  color: #fff;
  padding: 10px;
  font-size: 18px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

button:hover {
  background-color: #2980b9;
}

.password-match {
  color: #27ae60;
  font-size: 14px;
  margin-top: 5px;
}

.password-mismatch {
  color: #c0392b;
  font-size: 14px;
  margin-top: 5px;
}

.disabled-btn {
  background-color: #95a5a6 !important;
  color: #ecf0f1 !important;
  cursor: not-allowed;
}

.back-button {
  position: fixed;
  top: 5vw; 
  left: 4vw; 
  display: flex;
  align-items: center;
  cursor: pointer;
  color: #ffffff;
  font-size: 4vw;
  z-index: 1000;
}
</style>
  